<template>
  <div>
    <Card :bordered="false">
      <Row>
        <Col span="12" style="text-align: left">
          <Input v-model="deviceCode" placeholder="请输入设备编号" style="width: 200px"/>
          <Button icon="ios-search" type="primary"></Button>
        </Col>
      </Row>
    </Card>
    <Card :bordered="false">
      <Table stripe height="350" :columns="columns" :data="tableData"></Table>
    </Card>
    <div style="margin: 10px 0px 0px 0px;overflow: hidden">
      <div style="float: right;">
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          :current.sync="currentPage"
          show-sizer
          show-total
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import urlSource from '../../api/urlSource'

  export default {
    name: "index",
    components: {},
    data() {
      return {
        modal: {

        },
        deviceCode: "",
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '企业名称',
            key: 'unitName'
          },
          {
            title: '企业编号',
            key: 'code'
          },
          {
            title: '企业地址',
            key: 'address'
          },
          {
            title: '邮箱',
            key: 'email'
          },
          {
            title: '管理员姓名',
            key: 'userName'
          },
          /*{
            title: '操作',
            width: 280,
            key: 'id',
          },*/
        ],
        tableData: [],
        tableLoading: false,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizeOpts: [10, 20, 50, 100]

      }
    },
    methods: {
      //获取账户列表
      /*getAccountList() {
        let url = urlSource.apiUrl + "users/all";
        this.$http.get(url).then(res => {
          this.accountList = res.data;
        }).catch(err => {

        })
      },*/
      pageChange(val) {
        this.currentPage = val;
        this.query();
      },
      pageSizeChange(val) {
        if (val == '全部') {
          this.pageSize = this.total;
        } else {
          this.pageSize = parseInt(val);
        }
        this.pageChange(1);
      },
      /* 分页取数 */
      getDeviceDataPagination() {
        this.tableLoading = true;
        let url = urlSource.apiUrl + "device/queryPage";
        this.$http.post(url, {
          page: this.currentPage - 1,
          pagesize: this.pageSize,
          deviceCode: this.deviceCode
        }).then(res => {
          this.tableData = res.data;
        }).catch(err => {

        })
       /* api_getDevicePagination({
          startdate: this.$moment(this.queryCondition.startDate).startOf('day').format('YYYY-MM-DD'),
          enddate: this.$moment(this.queryCondition.endDate).add(1, 'days').startOf('day').format('YYYY-MM-DD'),
          cmsid: this.queryCondition.cmsSelect,
          page: this.currentPage - 1,
          pagesize: this.pageSize
        }).then(res => {
          this.total = res.data.total;
          let tempData = [];
          let data = res.data.data;
          data.forEach(v => {
            tempData.push({
              cmsName: this.getCmsName(v.cmsId),
              width: v.width,
              height: v.height,
              content: v.content,
              picContent: this.getPicContent(v.picContent),
              delay: v.delay + 's',
              transition: this.getTransition(v.transition),
              align: this.getAlign(v.align),
              font: this.getFontFamily(v.font),
              fontSize:v.fontSize,
              fontColor:this.getFontColor(v.fontColor),
              operator:v.operator,
              sendTime:this.$moment(new Date(v.sendTime)).format('YYYY-MM-DD HH:MM:SS')
            })
          })

          this.tableData = tempData;
          this.tableLoading = false;
        }).catch(err => {

        })*/
      },
      query() {
        this.getDeviceDataPagination()
      },
    },
    mounted() {
      this.$nextTick(() => {
        //TODO 获取车位使用数据

      })
    }
  }
</script>

<style lang="less">

</style>
